import React, {Component} from "react";
import {View, TouchableOpacity, Alert, StyleSheet, TextInput, Dimensions, Modal, Text, Image} from "react-native";
import ClosableModal from "rn-closable-modal";

const {width, height} = Dimensions.get('window');

export default class MineSchoolDialog extends Component {

    constructor(props) {
        super(props);
        this.state = {
            isVisible: this.props.show,
            name: this.props.name,
        };
    }

    componentWillReceiveProps(nextProps) {
        this.setState({isVisible: nextProps.show});
        this.setState({name: nextProps.name});
    }

    closeModal = () => {
        this.setState({
            isVisible: false
        });
        this.props.closeModal(false);
    }

    confirm() {
        this.setState({
            isVisible: false
        });
        this.props.closeModal(false);
        this.props.callbackName(this.state.name)
    }

    cancel() {
        this.setState({
            isVisible: false
        });
        this.props.closeModal(false);
        this.props.callbackName(this.props.name)
    }



    render() {

        return (
            <View style={{flex: 1}}>
                <ClosableModal
                    animationType='fade'
                    show={this.state.isVisible}
                    onClose={this.closeModal}
                    transparent={true}
                >
                    <View style={styles.white_background}>
                        <Text style={{fontSize:14,fontWeight:'bold',color:'black',marginTop:25}}>所在学校</Text>
                        <TextInput underlineColorAndroid='transparent' onChangeText={(text)=>this.setState({name:text})}
                                   style={{borderColor:'#DEDEDE',borderWidth:1,borderRadius:15,height:30,width:291,marginTop:15,padding:0}}
                                   textAlign='center' placeholderTextColor='rgba(0,0,0,0.3)' placeholder='杰睿学校'
                                   value={this.state.name}/>
                        <View style={{backgroundColor:'white',flexDirection:'row',marginTop:15}}>
                            <TouchableOpacity onPress={()=>{this.cancel()}}
                                              style={{borderRadius:15,borderWidth:1,borderColor:'#DEDEDE',backgroundColor:"white",width:136,height:30,borderRadius:15,justifyContent:'center',alignItems:'center',marginLeft:20,flexDirection:'row'}}>
                                <Text style={{color:'rgba(0,0,0,0.3)',fontSize:13,}}>取消</Text>
                            </TouchableOpacity>
                            <View style={{flex:1}}/>
                            <TouchableOpacity onPress={()=>{this.confirm()}}
                                              style={{backgroundColor:"#DB3843",width:136,height:30,borderRadius:15,justifyContent:'center',alignItems:'center',marginRight:20,flexDirection:'row'}}>
                                <Text style={{color:'white',fontSize:13,}}>确定</Text>
                            </TouchableOpacity>
                        </View>
                    </View>
                </ClosableModal>
            </View>
        );
    }
}

const styles = StyleSheet.create({
    container: {
        flex: 1,
        backgroundColor: 'rgba(0, 0, 0, 0.5)',
        justifyContent: 'center',
        alignItems: 'center',
    },

    white_background: {
        width: 331,
        height: 148,
        backgroundColor: 'white',
        borderRadius: 4,
        alignItems: 'center',
    },
});